<template>
	<!-- <uni-popup ref="popup" class="navBarPup" type="left" style="width: 80%;"> -->
	<view class="navBarPup" :class="{'show': show, 'hide': !show}" style="">
		<div class="closeBox" style="">
			<uni-icons type="closeempty" style="color: #fff;" size="20" @click="navClose"></uni-icons>
		</div>
		<view class="pageBox">
			<view 
			class="item" 
			
			v-for="(item, index) in pageData.chapterList" 
			:key="index"
				:class="{'hasLetter': item.letter,'level2': item.level == 2 , 'level3': item.level == 3}" :style="{ }"
				@click="navShow(item)" v-html="item.letter">
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "loginPup",
		props: ['pageData'],
		data() {
			return {
				show: false
			};
		},
		mounted() {

		},
		methods: {

			navClose() {
				// this.$refs.popup.close()
				this.show = false
				this.$emit('close')
			},

			init() {
				// if (!this.show) {
				// 	this.$refs.popup.open('left')
				// } else {
				// 	this.$refs.popup.close()
				// }
				// this.show = !this.show
				// this.$refs.popup.open('left')
				this.show = true
			},

			navShow(item) {
				// this.$emit('success', '.itemIndex' + item.sort)
				
				uni.setStorageSync('detailScroll', '.itemIndex' + item.sort);
				this.navClose()
			}


		}
	}
</script>


<style lang="less">
	.navBarPup {
		overflow: hidden; position: relative; float: left;
		
		&.show{
			width: 60vw; transition: all 0.5s;
		}
		&.hide{
			width: 0; transition: all 0.5s; 
		}
        
		.uni-popup__wrapper {
			/* width: 80%; */
		}
	}
</style>
<style scoped lang="less">
	.pageBox {
		height: 100vh;
		background-color: #444;
		position: relative;
		overflow-y: scroll;
		width: 60vw;
		padding: 30px 0 60px;

		.item {
			font-size: 17px;
			font-weight: bold;
			line-height: 28px;

			color: #fff;
			padding: 0 10px;

			&.hasLetter {
				border-bottom: 1px solid #333;
				padding: 5px 10px;
			}

			&:active {
				color: rgb(18, 150, 219);
				background-color: #f5f5f5;
			}

			&.level2 {
				font-size: 16px;
				font-weight: bold;
				padding-left: 20px;
				line-height: 26px;
				color: #fcfcfc;
			}

			&.level3 {
				font-size: 14px;
				font-weight: bold;
				padding-left: 40px;
				line-height: 26px;
				color: #fcfcfc;
			}
		}

	}

	.closeBox {
		width: 20px;
		height: 20px;
		color: #999;
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 9; color: #fff;
	}


	.lineBreak {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>